<template>
    <div>
        <div id="join_top">
            <img src="../../static/image/join/jiameng.gif">
        </div>
        <yd-cell-group>
            <yd-cell-item>
                <span slot="left" class="mes"><img src="../../static/image/join/ren.png"></span>
                <yd-input slot="right" v-model="name" ref="input1" required regex="/^[\u4e00-\u9fa5]{2,4}$/" placeholder="请输入您的姓名（必填）">{{name}}</yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left" class="mes"><img src="../../static/image/join/dianhuadefuben.png"></span>
                <yd-input slot="right" v-model="phone" ref="input2" required regex="mobile" placeholder="请输入您的联系方式（必填）">{{phone}}</yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left" class="mes"><img src="../../static/image/join/gongsidizhi.png"></span>
                <yd-input slot="right" v-model="company" ref="input3" required regex="/^[\u0391-\uFFE5]+$/" placeholder="请输入企业名称（必填）">{{company}}</yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left" class="mes"><img src="../../static/image/join/dizhi.png"></span>
                <yd-input slot="right" v-model="address" ref="input4" required regex="/^[\u0391-\uFFE5]+$/" placeholder="选择您所选城市（必填）">{{address}}</yd-input>
            </yd-cell-item>
            <yd-button-group>
                <yd-button  size="large" type="primary" @click.native="handleClick">立即加入</yd-button>
            </yd-button-group>
        </yd-cell-group>
    </div>
</template>

<style type="text/css">
    .yd-cell{
        padding: 0.2rem 0 0.2rem 0;
    }
    .yd-cell-item{
        margin: 0.2rem;
        border:0.01rem solid #e5e5e5;
        border-radius: 0.5rem;
    }
    #join_top img{
        width: 100%;
    }
    .yd-btn-primary:not(.yd-btn-loading){
        margin-bottom: 0.2rem;
    }
    .mes{
        margin-right: 0.4rem;
        padding:0 0.4rem 0 0.3rem;
        border-right: 0.01rem solid #e5e5e5;
    }
</style>
<script>
    export default {
        data () {
            return {
                name : '',
                phone : '',
                company : '',
                address : '',
            }
        },
        methods: {
            handleClick () {
                if (this.$refs.input1.valid === false) {
                    this.$dialog.toast({mes: '请输入正确的姓名', timeout: 1000})
                } else if (this.$refs.input2.valid === false) {
                    this.$dialog.toast({mes: '请输入正确的联系方式', timeout: 1000})
                } else if (this.$refs.input3.valid === false) {
                    this.$dialog.toast({mes: '请输入正确的企业名称', timeout: 1000})
                } else if (this.$refs.input4.valid === false) {
                    this.$dialog.toast({mes: '请输入正确的所在城市', timeout: 1000})
                } else {
                    this.$api.companyJoin({
                        name: this.name,
                        phone: this.phone,
                        company: this.company,
                        address: this.address
                    }, res => {
                        if (res.status) {
                            this.$dialog.toast({
                                mes: '恭喜您，注册成功！',
                                timeout: 1000,
                                callback: () => {
                                    this.$router.push({path: '/index'})
                                }
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>
